<template>
  <div class="product-management">
    <div class="form-section">
      <h2>{{ isEditing ? "编辑商品" : "发布商品" }}</h2>
      <form @submit.prevent="saveProduct">
        <input v-model="newProduct.name" placeholder="商品名称" required />
        <input v-model.number="newProduct.stock" type="number" placeholder="库存数量" required min="0" />

        <!-- 一级分类 -->
        <select v-model="newProduct.pri_category" @change="handlePrimaryCategoryChange" required>
          <option disabled value="">选择一级类别</option>
          <option v-for="category in primaryCategory" :key="category.id" :value="category.id">
            {{ category.name }}
          </option>
        </select>

        <!-- 二级分类 -->
        <select v-model="newProduct.sec_category" required>
          <option disabled value="">选择二级类别</option>
          <option v-for="subCategory in secondaryCategories" :key="subCategory.id" :value="subCategory.id">
            {{ subCategory.name }}
          </option>
        </select>


        <div class="description-section">
          <h3>商品描述</h3>
          <textarea v-model="newProduct.description" placeholder="输入商品描述..." class="description"></textarea>
          <div class="media-buttons">
            <h5>上传图片</h5>
            <input type="file" @change="handleImageUpload" accept="image/*" />
            <h5>上传视频</h5>
            <input type="file" @change="handleVideoUpload" accept="video/*" />
            <h5>上传链接</h5>
            <input type="url" v-model="linkUrl" placeholder="输入链接" />
          </div>
        </div>

        <div class="image-upload-section">
          <h5>上传商品图片</h5>
          <input type="file" @change="handleFileUpload" accept="image/*" />
          <!--          <div class="uploaded-images">-->
          <!--            <h5>已上传图片</h5>-->
          <!--            <div class="image-grid">-->
          <!--              <div v-for="(image, index) in newProduct.images" :key="index" class="uploaded-image">-->
          <!--                <img :src="image" alt="已上传图片" />-->
          <!--                <button @click="removeImage(index)">删除</button>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="uploaded-images">
            <h5>已上传图片</h5>
            <div class="image-grid">
              <div v-for="(image, index) in newProduct.images" :key="index" class="uploaded-image">
                <img :src="image" alt="已上传图片" />
                <button @click="removeImage(index)">删除</button>
              </div>
            </div>
          </div>
        </div>

        <button type="submit">{{ isEditing ? "更新商品" : "发布商品" }}</button>
      </form>
    </div>

    <div class="search-section">
      <h2>搜索商品</h2>
      <input v-model="searchQuery" placeholder="搜索商品..." @input="searchProducts" />
      <ul>
        <li v-for="product in searchedProducts" :key="product.id">
          {{ product.name }} - 库存: {{ product.stock }}
        </li>
      </ul>
    </div>

    <div class="product-list">
      <h2>所有商品</h2>
      <div class="product-grid">
        <div v-for="product in products" :key="product.id" class="product-card">
          <img :src="product.images[0]" alt="商品图片" class="product-image" />
          <div class="product-info">
            <span class="product-name"><strong>{{ product.name }}</strong></span>
            <br />
            <span class="product-stock"><strong>库存: </strong>{{ product.stock }}</span>
            <button @click="editProduct(product)">编辑</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

export default {
  data() {
    return {
      newProduct: {
        id: null,
        name: '',
        stock: 0,
        pri_category: '',
        sec_category: '',
        description: '',
        images: [],
        videos: [] // 用于存储视频
      },
      isEditing: false,
      linkUrl: '',
      primaryCategory: [],
      secondaryCategories: [],
      products: [],
      searchedProducts: [],
      searchQuery: '',
    };
  },
  created() {
    this.fetchCategories();
    this.fetchProducts();
  },
  // mounted() {
  //   this.getGoodsList();  // 在页面加载时获取商品列表
  // },
  methods: {
    // 获取一级分类
    fetchCategories() {
      fetch('http://localhost:8080/category')
          .then(response => response.json())
          .then(data => {
            this.primaryCategory = data.map(item => ({
              id: item.id,
              name: item.name
            }));
          })
          .catch(error => {
            console.error('获取一级分类失败:', error);
          });
    },

    handlePrimaryCategoryChange() {
      const selectedPrimaryId = this.newProduct.pri_category;
      console.log('Selected Primary ID:', selectedPrimaryId); // 打印选择的一级分类 ID

      if (!selectedPrimaryId) {
        this.secondaryCategories = [];
        console.log('No primary category selected. Clearing secondary categories.');
        return;
      }

      const url = `http://localhost:8080/categories/${selectedPrimaryId}`;
      console.log('Fetching secondary categories from URL:', url); // 打印请求的 URL

      fetch(url)
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
          })
          .then(data => {
            console.log('Fetched secondary categories data:', data); // 打印返回的数据
            this.secondaryCategories = data.secCategory || [];
            console.log('Updated secondary categories:', this.secondaryCategories); // 打印更新后的二级分类
          })
          .catch(error => {
            console.error('Failed to fetch secondary categories:', error);
          });
    },
    fetchProducts() {
      fetch('http://localhost:8080/good/list')
          .then(response => response.json())
          .then(data => {
            this.products = data.map(item => ({
              id: item.goodsId,
              name: item.name,
              stock: item.stock,
              description: item.description,
              pri_category: item.parCatName, // 将一级分类映射到 pri_category
              sec_category: item.catName,   // 将二级分类映射到 sec_category
              images: [item.image],
            }));
            console.log('Products loaded:', this.products); // 检查加载的商品列表
          })
          .catch(error => {
            console.error('获取商品列表失败:', error);
          });
    },
    editProduct(product) {
      console.log('Editing Product:', product); // 打印当前编辑的商品数据
      this.newProduct = { ...product }; // 将商品数据复制到 newProduct
      this.isEditing = true;
      console.log('New Product after assignment:', this.newProduct); // 检查 pri_category 是否被正确赋值
      const selectedPrimaryId = this.primaryCategory.find(
          category => category.name === this.newProduct.pri_category
      )?.id; // 获取一级分类 ID

      console.log('Primary Category ID for the product:', selectedPrimaryId);

      if (selectedPrimaryId) {
        const url = `http://localhost:8080/categories/${selectedPrimaryId}`;
        console.log('Fetching secondary categories for editing from URL:', url);

        fetch(url)
            .then(response => response.json())
            .then(data => {
              console.log('Fetched secondary categories for editing:', data);
              this.secondaryCategories = data.catName || []; // 确保二级分类绑定正确
            })
            .catch(error => {
              console.error('编辑商品时加载二级分类失败:', error);
            });
      }
    },
    // saveProduct() {
    //   if (this.isEditing) {
    //     const index = this.products.findIndex(product => product.id === this.newProduct.id);
    //     if (index !== -1) {
    //       const formData = new FormData();
    //
    //       // 将表单数据添加到 FormData
    //       formData.append("goodName", this.newProduct.name);
    //       formData.append("price", this.newProduct.price || 0);
    //       formData.append("stock", this.newProduct.stock);
    //       formData.append("description", this.newProduct.description);
    //
    //       // 如果有图片文件，加入 FormData
    //       if (this.newProduct.image) {
    //         formData.append("image", this.newProduct.image);
    //       }
    //
    //       // 发送 PUT 请求更新商品
    //       fetch(`http://localhost:8080/good/update/${this.newProduct.id}`, {
    //         method: "PUT",
    //         body: formData
    //       })
    //           .then(response => {
    //             if (!response.ok) {
    //               throw new Error(`HTTP error! Status: ${response.status}`);
    //             }
    //             return response.json();
    //           })
    //           .then(data => {
    //             console.log("Product updated successfully:", data);
    //
    //             // 直接修改数组索引
    //             this.products[index] = { ...this.newProduct };
    //             // // 强制更新视图
    //             // this.$forceUpdate();
    //             // alert('商品信息更新成功');
    //             // 重新获取商品列表（更新数据源）
    //             this.fetchProducts();
    //
    //             // 等待视图更新完成后显示提示
    //             this.$nextTick(() => {
    //               alert('商品信息更新成功');
    //             });
    //           })
    //           .catch(error => {
    //             console.error('更新商品失败:', error);
    //             alert('商品信息更新失败');
    //           });
    //     }
    //   } else {
    //     // const product = { id: Date.now(), ...this.newProduct, images: this.newProduct.images, videos: this.newProduct.videos };
    //     // this.products.push(product);
    //     // alert('发布信息成功');
    //     // 发布新商品逻辑
    //     if (!this.newProduct.name || !this.newProduct.stock || !this.newProduct.description) {
    //       alert("请确保填写了所有必填字段!");
    //       return;
    //     }
    //
    //     // 上传图片和视频文件
    //     Promise.all([
    //       this.newProduct.image ? this.uploadFile(this.newProduct.image, "image") : Promise.resolve(null),
    //       this.newProduct.video ? this.uploadFile(this.newProduct.video, "video") : Promise.resolve(null)
    //     ])
    //         .then(([imageUrl, videoUrl]) => {
    //           // 构建商品数据
    //           const productData = {
    //             goodName: this.newProduct.name,
    //             price: this.newProduct.price,
    //             stock: this.newProduct.stock,
    //             description: this.newProduct.description,
    //             imageUrl, // 图片 URL
    //             videoUrl  // 视频 URL
    //           };
    //
    //           // 提交商品数据到发布商品接口
    //           return fetch("http://localhost:8080/good", {
    //             method: "POST",
    //             body: JSON.stringify(productData),
    //             headers: {
    //               "Content-Type": "application/json"
    //             }
    //           });
    //         })
    //         .then(response => {
    //           if (!response.ok) {
    //             throw new Error(`发布商品失败: ${response.status}`);
    //           }
    //           return response.json();
    //         })
    //         .then(data => {
    //           console.log("商品发布成功:", data);
    //           alert("商品发布成功");
    //         })
    //         .catch(error => {
    //           console.error("发布商品失败:", error);
    //           alert("发布商品失败");
    //         });
    //   }
    //   this.resetNewProduct();
    // },
    // saveProduct() {
    //   const formData = new FormData();
    //
    //   // 获取表单数据并添加到 FormData
    //   formData.append("goodName", this.newProduct.name);
    //   formData.append("price", this.newProduct.price || 0); // 假设价格是可选的
    //   formData.append("stock", this.newProduct.stock);
    //   formData.append("description", this.newProduct.description);
    //   formData.append("pri_category", this.newProduct.pri_category);
    //   formData.append("sec_category", this.newProduct.sec_category);
    //
    //   // 确保 images 是一个数组，防止访问 undefined
    //   const images = Array.isArray(this.newProduct.images) ? this.newProduct.images : [];
    //   if (images.length > 0) {
    //     images.forEach(image => {
    //       formData.append("image", image); // 假设图片是文件
    //     });
    //   }
    //
    //   // 上传视频（如果有）
    //   const videos = Array.isArray(this.newProduct.videos) ? this.newProduct.videos : [];
    //   if (videos.length > 0) {
    //     videos.forEach(video => {
    //       formData.append("video", video); // 假设视频是文件
    //     });
    //   }
    //
    //   if (this.isEditing) {
    //     // 编辑商品，发送 PUT 请求
    //     fetch(`http://localhost:8080/good/update/${this.newProduct.id}`, {
    //       method: "PUT",
    //       body: formData
    //     })
    //         .then(response => {
    //           if (!response.ok) {
    //             throw new Error(`HTTP error! Status: ${response.status}`);
    //           }
    //           return response.json();
    //         })
    //         .then(data => {
    //           console.log("商品更新成功:", data);
    //           const index = this.products.findIndex(product => product.id === this.newProduct.id);
    //           if (index !== -1) {
    //             this.products[index] = { ...this.newProduct }; // 更新本地商品数据
    //           }
    //           this.fetchProducts(); // 重新加载商品列表
    //           alert('商品信息更新成功');
    //         })
    //         .catch(error => {
    //           console.error('更新商品失败:', error);
    //         });
    //   } else {
    //     // 发布商品，发送 POST 请求
    //     fetch("http://localhost:8080/good/create", {
    //       method: "POST",
    //       body: formData
    //     })
    //         .then(response => response.json())
    //         .then(data => {
    //           console.log("商品发布成功:", data);
    //           this.products.push({ ...this.newProduct, id: data.id });  // 假设返回的 data 包含商品 id
    //           alert('商品发布成功');
    //         })
    //         .catch(error => {
    //           console.error('发布商品失败:', error);
    //         });
    //   }
    //
    //   this.resetNewProduct(); // 重置表单数据
    // },
    saveProduct() {
      // 验证必填项
      if (!this.newProduct.name || !this.newProduct.stock || !this.newProduct.pri_category || !this.newProduct.sec_category) {
        alert("请确保填写了所有必填字段!");
        return;
      }

      const formData = new FormData();
      formData.append("goodName", this.newProduct.name);
      formData.append("price", this.newProduct.price || 0);
      formData.append("stock", this.newProduct.stock);
      formData.append("description", this.newProduct.description);
      formData.append("parCatName", this.newProduct.pri_category); // 一级分类
      formData.append("catName", this.newProduct.sec_category);   // 二级分类

      // 上传图片
      if (this.newProduct.image) {
        formData.append("image", this.newProduct.image);  // 单个图片上传
      }

      // 判断是发布新商品还是更新商品
      if (this.isEditing && this.newProduct.id) {
        // 更新商品
        fetch(`http://localhost:8080/good/update/${this.newProduct.id}`, {
          method: "PUT",
          body: formData,
        })
            .then(response => {
              if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
              }
              return response.json();
            })
            .then(data => {
              alert('商品更新成功');
              this.fetchProducts();  // 重新加载商品列表
            })
            .catch(error => {
              console.error('更新商品失败:', error);
            });
      } else {
        // 发布新商品
        fetch("http://localhost:8080/good", {
          method: "POST",
          body: formData,
        })
            .then(response => response.json())
            .then(data => {
              alert('商品发布成功');
              this.products.push({ ...this.newProduct, id: data.goodsId });  // 新商品ID通过后端返回
            })
            .catch(error => {
              console.error('发布商品失败:', error);
            });
      }

      this.resetNewProduct(); // 重置表单
    },


    handleFileUpload(event, type) {
      const file = event.target.files[0];
      if (file) {
        const formData = new FormData();
        formData.append("file", file);

        // 上传到服务器
        fetch("http://localhost:8080/upload", {
          method: "POST",
          body: formData
        })
            .then(response => response.json())
            .then(data => {
              // 假设后端返回文件的 URL
              if (type === 'image') {
                this.newProduct.images.push(data.url);  // 将返回的图片 URL 添加到 images 数组
              } else if (type === 'video') {
                this.newProduct.videos.push(data.url);  // 将返回的视频 URL 添加到 videos 数组
              }
            })
            .catch(error => {
              console.error("文件上传失败:", error);
            });
      }
    },
// // 上传文件的通用方法
//     uploadFile(file, fileType) {
//       const formData = new FormData();
//       formData.append("file", file);
//
//       return fetch("http://localhost:8080/upload", {
//         method: "POST",
//         body: formData
//       })
//           .then(response => {
//             if (!response.ok) {
//               throw new Error(`文件上传失败: ${response.status}`);
//             }
//             return response.text(); // 假设返回的是文件的 URL
//           })
//           .then(fileUrl => {
//             console.log(`${fileType} 上传成功:`, fileUrl);
//             return fileUrl; // 返回文件的 URL
//           })
//           .catch(error => {
//             console.error(`${fileType} 上传失败:`, error);
//             alert(`${fileType} 上传失败`);
//             throw error; // 如果上传失败，抛出错误
//           });
//     },
    searchProducts() {
      this.searchedProducts = this.products.filter(product =>
          product.name.includes(this.searchQuery)
      );
    },
    // handleFileUpload(event) {
    //   const file = event.target.files[0];
    //   if (file) {
    //     const imageUrl = URL.createObjectURL(file);
    //     this.newProduct.images.push(imageUrl);
    //   }
    // },
    // handleImageUpload(event) {
    //   const file = event.target.files[0];
    //   if (file) {
    //     const imageUrl = URL.createObjectURL(file);
    //     this.newProduct.images.push(imageUrl);
    //   }
    // },
    // handleVideoUpload(event) {
    //   const file = event.target.files[0];
    //   if (file) {
    //     const videoUrl = URL.createObjectURL(file);
    //     this.newProduct.videos.push(videoUrl);
    //   }
    // },

//     // 上传文件到后端
//     handleFileUpload(event) {
//       const file = event.target.files[0];
//       if (file) {
//         const formData = new FormData();
//         formData.append("file", file); // 将文件附加到表单数据中
//
//         // 调用后端的上传接口
//         fetch("http://localhost:8080/upload", {
//           method: "POST",
//           body: formData
//         })
//             .then(response => response.json())
//             .then(data => {
//               // 假设后端返回的是文件 URL
//               this.newProduct.images.push(data); // 将返回的 URL 添加到 images 数组中
//             })
//             .catch(error => {
//               console.error("上传文件失败:", error);
//             });
//       }
//     },
//
// // 处理商品描述图片上传
//     handleImageUpload(event) {
//       const file = event.target.files[0];
//       if (file) {
//         const formData = new FormData();
//         formData.append("file", file);
//
//         fetch("http://localhost:8080/upload", {
//           method: "POST",
//           body: formData
//         })
//             .then(response => response.json())
//             .then(data => {
//               // 假设后端返回图片的 URL
//               this.newProduct.images.push(data);
//             })
//             .catch(error => {
//               console.error("上传商品描述图片失败:", error);
//             });
//       }
//     },
//     // 上传视频
//     handleVideoUpload(event) {
//       const file = event.target.files[0];
//       if (file) {
//         const formData = new FormData();
//         formData.append("file", file);
//
//         fetch("http://localhost:8080/upload", {
//           method: "POST",
//           body: formData
//         })
//             .then(response => response.json())
//             .then(data => {
//               // 假设后端返回视频的 URL
//               this.newProduct.videos.push(data);
//             })
//             .catch(error => {
//               console.error("上传视频失败:", error);
//             });
//       }
//     },
    removeImage(index) {
      this.newProduct.images.splice(index, 1);
    },
    resetNewProduct() {
      this.newProduct = {
        id: null,
        name: '',
        stock: 0,
        pri_category: '',
        sec_category: '',
        description: '',
        images: [],
        videos: []
      };
      this.isEditing = false;
    },
    // // 获取商品列表
    // getGoodsList() {
    //   this.$axios.get('http://localhost:8080/good/list')
    //       .then(response => {
    //         // 更新商品列表数据
    //         this.goodsList = response.data;
    //       })
    //       .catch(error => {
    //         console.error("Failed to fetch goods:", error);
    //       });
    // },
    //
    // // 更新商品信息后重新获取商品列表
    // updateGood(goodsId, updatedData) {
    //   this.$axios.put(`http://localhost:8080/good/update/${goodsId}`, updatedData)
    //       .then(response => {
    //         console.log('商品信息更新成功', response.data);
    //         // 更新商品列表
    //         this.getGoodsList();  // 更新商品列表
    //       })
    //       .catch(error => {
    //         console.error('更新商品信息失败', error);
    //       });
    // }
  }
};
</script>


<style>
.product-management {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  text-align: center;
}

.form-section, .search-section, .product-list {
  margin: 20px 0;
}

input, select, button {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.description-section {
  margin-top: 20px;
}

.description{
  width: 100%;
}

.media-buttons {
  display: flex;
  flex-direction: column;
}

.image-upload-section {
  margin-top: 20px;
}

.uploaded-images {
  margin-top: 10px;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.uploaded-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.product-card {
  position: relative; /* 设置相对定位，为按钮提供定位基准 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
  transition: box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置固定高度，避免按钮被推到外面 */
}

.product-card:hover {
  transform: scale(1.05);
}

.product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.product-info {
  flex-grow: 1; /* 商品信息区域占据剩余空间 */
  text-align: left;
  margin-bottom: 40px; /* 为按钮腾出空间 */
}

.product-name {
  font-weight: bold;
  margin-bottom: 10px;
}

.product-stock {
  margin-bottom: 10px;
}

.product-card button {
  position: absolute; /* 使按钮固定在卡片底部 */
  bottom: 10px; /* 距离底部10px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
  background-color: #0056b3;
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 5px;
}

</style>